<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>实时监控云平台</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="mintor/model/model.css"/>
    <script type="text/javascript" src="jquery/jquery-easyui-1.4.3/jquery.min.js"></script>

    <script language=javascript>
        function Tab(num) {
            if (num == 1) {
                document.getElementById("d1").style.display = "block";
                document.getElementById("L1").style.backgroundColor = "#D4D0C8";
                document.getElementById("d2").style.display = "none";
                document.getElementById("L2").style.backgroundColor = "#EEEEEE";
            }
            else {
                document.getElementById("d2").style.display = "block";
                document.getElementById("L2").style.backgroundColor = "#D4D0C8";
                document.getElementById("d1").style.display = "none";
                document.getElementById("L1").style.backgroundColor = "#EEEEEE";
            }
        }
    </script>
    <script type="text/javascript">
        var wsPath = "<%=webSocketPath%>";
        var webSocket = new WebSocket('ws://' + wsPath + '/websocket/001-POS');
        webSocket.onerror = function (event) {
            onError(event)
        };
        webSocket.onopen = function (event) {
            onOpen(event)
        };
        webSocket.onmessage = function (event) {
            onMessage(event)
        };
        function onMessage(event) {
            console.log(event.data);
            var data = JSON.parse(event.data);
            postionarr = data.value.split(",");
            //坐标统一
            if (postionarr[0] > 0) {
                posx = -(postionarr[0] / 877);
            } else {
                posx = postionarr[0] / 877;
            }
            if (postionarr[1] > 0) {
                posy = -(postionarr[1] / 645);
            } else {
                posy = postionarr[1] / 645;
            }
            if (postionarr[2] > 0) {
                posz = postionarr[2] / 812.5;
            } else {
                posz = -(postionarr[2] / 812.5);
            }
        }
        function onOpen(event) {
            console.log("open")
        }

        function onError(event) {
            alert(event.data);
        }
        function start() {
            webSocket.send('hello');
            return false;
        }
    </script>

    <script language="Javascript">
        function display() {
            if (runisactive == 1) {
                M_e = Scene.Engine;
                M_e.Nodes("star1").Fields("x0") = -(M_x.value / 877);
                M_e.Nodes("star1").Fields("x1") = posx;
                M_e.Nodes("star3").Fields("y0") = M_z.value / 812.5;
                M_e.Nodes("star3").Fields("y1") = posz;
                M_e.Nodes("star2").Fields("z0") = -(M_y.value / 645);
                M_e.Nodes("star2").Fields("z1") = posy;
                M_e.Nodes("clockx").Fields("loop") = 1;
                M_e.Nodes("clockx").Fields("enabled") = 1;
                M_e.Nodes("clocky").Fields("loop") = 1;
                M_e.Nodes("clocky").Fields("enabled") = 1;
                M_e.Nodes("clockz").Fields("loop") = 1;
                M_e.Nodes("clockz").Fields("enabled") = 1;
                M_x.value = postionarr[0];
                M_y.value = postionarr[1];
                M_z.value = postionarr[2];
                x.value = postionarr[0];
                y.value = postionarr[1];
                z.value = postionarr[2];
            }
        }
        function M_o() {
            runisactive = 1;//用来判断机床的运动状态
            M_e = Scene.Engine;
            M_e.Nodes("star1").Fields("x0") = M_x.value;
            M_e.Nodes("star1").Fields("x1") = postionarr[0];
            M_e.Nodes("star3").Fields("y0") = M_z.value;
            M_e.Nodes("star3").Fields("y1") = postionarr[2];
            M_e.Nodes("star2").Fields("z0") = M_y.value;
            M_e.Nodes("star2").Fields("z1") = postionarr[1];
            M_e.Nodes("clockx").Fields("loop") = 1;
            M_e.Nodes("clockx").Fields("enabled") = 1;
            M_e.Nodes("clocky").Fields("loop") = 1;
            M_e.Nodes("clocky").Fields("enabled") = 1;
            M_e.Nodes("clockz").Fields("loop") = 1;
            M_e.Nodes("clockz").Fields("enabled") = 1;
            M_x.value = postionarr[0];
            M_y.value = postionarr[1];
            M_z.value = postionarr[2];
            x.value = postionarr[0];
            y.value = postionarr[1];
            z.value = postionarr[2];
            timename = setInterval("display();", 200);
        }
        function M_c() {
            runisactive = 0;
            M_e = Scene.Engine;
            M_e.Nodes("clockx").Fields("enabled") = 0;
            M_e.Nodes("clocky").Fields("enabled") = 0;
            M_e.Nodes("clockz").Fields("enabled") = 0;
        }
    </script>
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
    <tr height=20 align=center>
        <td width=10% height=32px id="L1" onclick="Tab(1)"><a>显示</a></td>
        <td width=10% id="L2" onclick="Tab(2)"><a>控制</a></td>
    </tr>
</table>
<div id="d1" style="display:block;">
    <div class="control_left">
        <div class="controller">
            <div class="each_widow" style="width:408px;">
                <span class="title" style="width:100px;">坐标显示</span>
                <div class="axis"><span>X轴坐标</span><input type=text name="x" id="x" value="0"></div>
                <div class="axis"><span>Y轴坐标</span><input type=text name="y" id="y" value="0"></div>
                <div class="axis"><span>Z轴坐标</span><input type=text name="z" id="z" value="0"></div>
            </div>
        </div>
    </div>
</div>
<div id="d2" style="display:none;">
    <div class="control_left">
        <div class="controller">
            <div class="each_widow" style="width:508px;">
                <span class="title" style="width:100px;">坐标显示</span>
                <div class="axis"><span>X轴坐标</span><input type=text name="M_x" id="M_x" value="0"></div>
                <div class="axis"><span>Y轴坐标</span><input type=text name="M_y" id="M_y" value="0"></div>
                <div class="axis"><span>Z轴坐标</span><input type=text name="M_z" id="M_z" value="0"></div>
                <span class="each_choose start" style="display:block;" onclick="M_o()">RUN</span>
                <span class="each_choose start" style="display:block;" onclick="M_c()">STOP</span>
            </div>
            <div class="each_widow" style="width:508px;">
                <span class="title" style="width:100px;">进给速度</span>
                <div class="axis"><span>X轴速度</span><input type=text name="xaxisspeed" id="xaxisspeed" value="0"></div>
                　　　　　　　　　　　　
                <div class="axis"><span>Y轴速度</span><input type=text name="yaxisspeed" id="yaxisspeed" value="0"></div>
                　　　　　　　　　　　　
                <div class="axis"><span>Z轴速度</span><input type=text name="xaxisspeed" id="zaxisspeed" value="0"></div>
                　　　　　　　　　　　　<span class="each_choose start" style="display:block;" onclick="Modification()">确定</span>
            </div>
        </div>
    </div>
</div>
<div class="control_right">
    <OBJECT id="Scene" classid="CLSID:86A88967-7A20-11d2-8EDA-00600818EDB1"
            style=" width:600px; height:600px; display:block;">
        <embed src="mintor\model\rotation.wrl" width="600px" height="600px" type="application/x-cortona">
            <PARAM name="Scene" value="mintor\model\machine_model.wrl">
    </OBJECT>
</div>
</body>
</html>